<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<view class="content" v-if="isLoaded">
			<view class="headimg">
				<text class="headimg-text">logo</text>
				<view class="headimg-img">
					<robby-image-upload :src="userInfo.logo" :width="width" :height="height" :lineheight="lineheight"
						:borderRadius="borderRadius">
					</robby-image-upload>
				</view>
			</view>
			<view class="realname" @tap="goname">
				<view class="realname-text">
					<text class="realname-text-title">公司名称</text>
					<text class="realname-text-name" v-if="userInfo.company_name">{{userInfo.company_name}}</text>
					<text class="realname-text-name" v-else>佚名</text>
				</view>
				<image class="realname-img" :src="right"></image>
			</view>

			<view class="realname" @tap="gonumber">
				<view class="realname-text">
					<text class="realname-text-title">规模（公司人数）</text>
					<text class="realname-text-name" v-if="userInfo.employee_num">{{userInfo.employee_num}}</text>
					<text class="realname-text-name" v-else>未知</text>
				</view>
				<image class="realname-img" :src="right"></image>
			</view>
			<!-- <view class="realname">
				<view class="realname-text">
					<text class="realname-text-title">出生日期</text>
					<text class="realname-text-name" v-if="userInfo.borth">{{userInfo.borth}}</text>
					<text class="realname-text-name" v-else>未知</text>
				</view>
				<view>
					<view class="test">
						<button type="primary" @click="DatePicker('date')">选择日期</button>
					</view>
					<!-- <view class="date"> -->
			<!-- <MxDatePicker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'入住'"
						:end-text="'离店'" :show-seconds="true" @confirm="ed" @cancel="ed"
						style="background-color: rgba(0,0,0,.4);" /> -->
			<!-- </view> -->
			<!-- </view> -->
			<!-- </view> -->
			<view class="realname">
				<view class="realname-text">
					<text class="realname-text-title">公司地址</text>
					<view class="realname-text-name">
						<Region :defaultValue="userInfo.company_area" @change="onChangeRegion"></Region>
					</view>
				</view>
			</view>
			<view class="realname" @tap="goaddress">
				<view class="realname-text">
					<text class="realname-text-title">详细地址</text>
					<text class="realname-text-name" v-if="userInfo.address">{{userInfo.address}}</text>
					<text class="realname-text-name" v-else>未知</text>
				</view>
				<image class="realname-img" :src="right"></image>
			</view>
			<view class="realname" @tap="gomobile">
				<view class="realname-text">
					<text class="realname-text-title">联系电话</text>
					<text class="realname-text-name" v-if="userInfo.mobile">{{userInfo.mobile}}</text>
					<text class="realname-text-name" v-else>未知</text>
				</view>
				<image class="realname-img" :src="right"></image>
			</view>
			<view class="realname" @tap="gointroduce">
				<view class="realname-text">
					<text class="realname-text-title">公司简介</text>
					<text class="realname-text-name" v-if="userInfo.introduce">{{userInfo.introduce}}</text>
					<text class="realname-text-name" v-else>未知</text>
				</view>
				<image class="realname-img" :src="right"></image>
			</view>
			
			<view class="buttons">
				<view class="btn" @tap="goIndex">
					返回主页
				</view>
			</view>
			
		</view>

		<!-- 底部菜单 -->
		<BottomTabbar :selected="3"></BottomTabbar>
	</view>

</template>

<script>
	import BottomTabbar from '@/components/bottom-tabbar/bottom-tabbar.vue';
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue';
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	import Region from '@/components/region/region.vue';
	export default {
		data() {
			return {
				title: '公司信息',
				isLoaded: false,
				right: '/static/images/right.png',

				userInfo: {
					logo: '/static/images/company_logo.png',
					company_name: '',
					employee_num: 0,
					company_area: [],
					address: '',
					mobile: '',
					introduce: ''
				},
				date: '2005/01/01',
				showPicker: false,
				type: 'rangetime',
				value: '',

				height: '170rpx',
				lineheight: '170rpx',
				width: '170rpx',
				borderRadius: ''
			}
		},
		components: {
			BottomTabbar,
			robbyImageUpload,
			MxDatePicker,
			Region
		},

		// 页面生命周期，下拉刷新后触发
		onPullDownRefresh() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}
			this.loadData();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 600)
		},

		computed: {

		},

		onLoad: function() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			uni.showLoading({
				title: '加载中...'
			});
			this.loadData();
			setTimeout(() => {
				this.isLoaded = true;
				uni.hideLoading();
			}, 600)

			uni.$on('changeLogo', (option) => {
				let data = JSON.parse(option)
				this.userInfo.logo = data.data;
				this.logo(data.data)
			})

			uni.$on('changeCompanyName', (option) => {
				this.userInfo.company_name = option.company_name;
				this.changeStat();
			})

			uni.$on('changeEmployeeNum', (option) => {
				this.userInfo.employee_num = option.employee_num;
				this.changeStat();
			})

			uni.$on('changeCompanyAddress', (option) => {
				this.userInfo.address = option.company_address;
				this.changeStat();
			})

			uni.$on('changeCompanyMobile', (option) => {
				this.userInfo.mobile = option.company_mobile;
			})

			uni.$on('changeCompanyIntroduce', (option) => {
				this.userInfo.introduce = option.company_introduce;
				this.changeStat();
			})

			uni.setStorageSync('uploadType', 'logo')
		},
		methods: {
			async loadData() {
				let token = uni.getStorageSync('token');
				let url = '/getComInfo';
				let res = await this.$myRequest({
					url: url,
					data: {
						cate: 1,
						token: token
					},
					methods: 'post'
				})

				let info = res.data.data;
				if (info.logo) {
					this.userInfo.logo = info.logo;
				}
				if (info.company_name) {
					this.userInfo.company_name = info.company_name;
				}
				if (info.employee_num) {
					this.userInfo.employee_num = info.employee_num;
				}

				this.userInfo.company_area = info.regionStr;

				if (info.address) {
					this.userInfo.address = info.address;
				}

				if (info.mobile) {
					this.userInfo.mobile = info.mobile;
				}

				if (info.introduction) {
					this.userInfo.introduce = info.introduction;
				}

			},

			async goname() {
				uni.navigateTo({
					url: '/pages4/pages/company-name/company-name?company_name=' + this.userInfo.company_name
				})
			},

			async gonumber() {
				uni.navigateTo({
					url: '/pages4/pages/employee-num/employee-num?employee_num=' + this.userInfo.employee_num
				})
			},

			async goaddress() {
				uni.navigateTo({
					url: '/pages4/pages/company-address/company-address?company_address=' + this.userInfo.address
				})
			},

			async gomobile() {
				uni.navigateTo({
					url: '/pages4/pages/company-mobile/company-mobile?company_mobile=' + this.userInfo.mobile
				})
			},

			async gointroduce() {
				uni.navigateTo({
					url: '/pages4/pages/company-introduce/company-introduce?company_introduce=' + this.userInfo
						.introduce
				})
			},

			onChangeRegion(region) {
				let id = 0;
				let area = [];
				if (region[2].id > 0) {
					id = region[2].id;
					area = [region[0].name, region[1].name, region[2].name];
				} else {
					id = region[1].id;
					area = [region[0].name, region[1].name, ''];
				}

				this.userInfo.company_area = area;

				this.changeArea(id);
			},

			async changeArea(id) {
				// console.log(id)
				let token = uni.getStorageSync('token');
				let res = await this.$myRequest({
					url: '/region',
					data: {
						cate: 2,
						token: token,
						region: id
					},
					methods: 'post'
				})

				this.changeStat();
			},

			async logo(logo) {
				let token = uni.getStorageSync('token');
				let res = await this.$myRequest({
					url: '/logo',
					data: {
						cate: 2,
						token: token,
						logo: logo
					},
					methods: 'post'
				})

				this.changeStat();
			},

			async changeStat() {
				if (this.userInfo.logo != '/static/images/company_logo.png' && this.userInfo.company_name != '' && this
					.userInfo.employee_num != 0 && this.userInfo.company_area != [] && this.userInfo.address != '' &&
					this.userInfo.introduce != '') {
					uni.$emit('changeStatus')
				}
			},
			
			async goIndex() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
		min-height: 1660upx;
	}
</style>

<style lang='scss' scoped>
	.content {
		font-size: $font-base;
		background-color: #fff;
		// #ifdef APP-PLUS
		padding: 176rpx 48rpx 30rpx;
		// #endif
		
		// #ifdef MP-WEIXIN
		padding: 176rpx 48rpx 30rpx;
		// #endif

		// #ifdef H5
		padding: 124rpx 48rpx 30rpx;
		// #endif

		.headimg {
			width: 100%;
			height: 170rpx;
			line-height: 170rpx;
			position: relative;
			border-bottom: 1px solid #f3f3f6;
			display: flex;
			justify-content: space-between;

			.headimg-img {
				height: 170rpx;
				width: 170rpx;
				line-height: 170rpx;
				vertical-align: center;
			}
		}

		.realname {
			width: 100%;
			min-height: 170rpx;
			line-height: 170rpx;
			position: relative;
			border-bottom: 1px solid #f3f3f6;

			.realname-text {
				position: absolute;
				top: 29rpx;
				display: inline-flex;
				flex-direction: column;
				align-items: left;
				max-width: 88%;

				.realname-text-title,
				.realname-text-name {
					/* height: 56rpx; */
					line-height: 56rpx;
					white-space: nowrap;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.realname-text-title {
					color: #808080
				}
			}

			.realname-img {
				height: 170rpx;
				width: 50rpx;
				display: inline-block;
				padding: 75rpx 19rpx;
				float: right;
			}
		}

		uni-button[type=primary] {
			background-color: #f3431a;
			font-size: $font-base;
		}
		
		.buttons {
			width: 100%;
			font-size: $font-base;
			padding-top: 50upx;
		}
		
		.btn {
			background-color: $base-color;
			color: #fff;
			height:90upx;
			display: flex;
			align-items: center;
			justify-content: center;
			letter-spacing: 6upx;
			border-radius: 10upx;
		}
	}
</style>
